<template>
  <div class="app-container">
    <div v-if="user" style="height: max-content">
      <el-row :gutter="20">

        <el-col :span="6" :xs="24" >
          <user-card :user="user" style="min-height: 650px" />
        </el-col>

        <el-col :span="18" :xs="24">
          <el-card style="min-height: 650px">
            <el-tabs v-model="activeTab" ref="tabs">
              <el-tab-pane label="基本资料" name="userInfo">
                <UserInfo :user="user" />
              </el-tab-pane>
              <el-tab-pane label="修改密码" name="resetPwd">
                <ResetPwd :user="user" />
              </el-tab-pane>
              <el-tab-pane name="userApi">
                <span slot="label">{{apiApiName}}</span>
                <UserApi :user="user" @freshCount="freshCount"/>
              </el-tab-pane>
              <el-tab-pane name="userTable">
                <span slot="label">{{apiTableName}}</span>
                <UserTable :user="user" @freshCount="freshCount"/>
              </el-tab-pane>
              <el-tab-pane name="userSubscribed" label="我的订阅">
                <UserSubscribed :user="user" @freshCount="freshCount"/>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>

      </el-row>
    </div>
  </div>
</template>

<script>
  import store from '@/store'
  import UserCard from './UserCard'
  import ResetPwd from './ResetPwd'
  import UserApi from './UserApi'
  import UserTable from './UserTable'
  import UserInfo from "./UserInfo";
  import UserSubscribed from './UserSubscribed'
  import { getUser } from '@/api/system/user'
  export default {
    name: 'Profile',
    components: { UserCard, UserInfo, ResetPwd, UserApi, UserTable, UserSubscribed},
    data() {
      return {
        user: {},
        activeTab: 'userInfo',
        apiApiName: '我的API',
        apiTableName: '我的库表2',
      }
    },
    computed: {
    },
    created() {
      this.getUser()
    },
    methods: {
      freshCount (flag,count){
       if(flag === 'api'){
         this.apiApiName = '我的API' + '(' + count + ')'
       }
       if(flag === 'table'){
          this.apiTableName = '我的库表' + '(' + count + ')'
        }
      },
      /** 获取详情 */
      getUser: function() {
        const userInfo = store.getters.user
        getUser(userInfo.id).then(response => {
          if (response.success) {
            this.user = response.data
            this.user.roleList = response.data.roles.map(role => role.roleName)
            this.user.postList = response.data.posts.map(post => post.postName)
            console.log(this.user)

          }
        })
      }
    }
  }
</script>
